<template>
    <div id="simLockDialog" class="simlock">
        <el-dialog :title="this.$t('simlock.simlockTitle')" :visible.sync="show" :append-to-body="true" :show-close="false" width="670px" :close-on-press-escape="false">
            <el-form :model="form" ref="simLockRefs" :rules="simLockRules">
                <el-form-item class="password" prop="password">
                    <el-input id="password" v-model.trim="form.password" :type="inputType" maxlength="16"></el-input>
                    <img id="passwordIcon" class="password-icon" :src="eyeIcon" @click="changeImg" />
                </el-form-item>
            </el-form>
            <p id="tryUnlockCount" style="margin-bottom: 6px">{{ `${this.$t('simlock.lastUnlockingCount')}${tryUnLockCount}` }}</p>
            <el-button id="unlockButton" class="button-style" type="primary" round @click="tryUnLock" :disabled="getUnlockStatus">{{ this.$t('common.unlockButton') }}</el-button>
        </el-dialog>
    </div>
</template>
<script>
import { verifyPinCode } from '@/api/pin';

export default {
    data() {
        return {
            show: false,
            form: {
                password: ''
            },
            tryUnLockCount: '',
            simLockRules: {
                password: [{ required: true, trigger: 'blur', pattern: /^\d{16}$/, message: this.$t('simlock.passwordValid') }]
            },
            showEyeIconUrl: require('@/assets/images/eye_reveal_new@3.png'),
            closeEyeIconUrl: require('@/assets/images/eye_hide_new@3.png'),
            eyeIcon: '',
            inputType: 'password',
            showPasswordFlag: false
        };
    },
    created() {
        this.eyeIcon = this.closeEyeIconUrl;
    },
    mounted() {},
    methods: {
        getLockInfo(obj) {
            /**
             * string sim_status //  connected disconnected no_service connecting sim_locked need_pin need_puk
                bool pin_lock // 是否lock
                number remaining_unlock_trial 允许unlock的次数
                string pin_code // ping 码
                bool auto_unlock // 自动unlock
             */
            console.log('sim_status:', obj);
            const { remaining_unlock_trial, pin_lock, sim_status } = obj;
            console.log('pin_lock:', pin_lock,remaining_unlock_trial,sim_status);
            if (pin_lock && (sim_status === 'sim_locked' || sim_status === 'need_pin' || sim_status === 'need_puk')) {
                this.tryUnLockCount = remaining_unlock_trial;
                console.log('remaining_unlock_trial:', remaining_unlock_trial);
                if (remaining_unlock_trial > 0) {
                    if (pin_lock) {
                        this.show = true;
                        return;
                    }
                }
            }
            this.show = false;
        },

        hide() {
            this.show = false;
        },

        tryUnLock() {
            this.$refs.simLockRefs.validate(async (valid) => {
                if (valid) {
                    try {
                        const res = await verifyPinCode(this.form.password)
                        this.form.password = '';
                        this.$message.success(this.$t('simlock.success'));
                        this.$emit('showSimLockDialog');
                    } catch (error) {
                        this.$message.error(this.$t('simlock.errPassword'));
                    }
                }
            });
        },
        changeImg() {
            if (this.showPasswordFlag) {
                this.inputType = 'password';
                this.eyeIcon = this.closeEyeIconUrl;
                this.showPasswordFlag = false;
            } else {
                this.inputType = '';
                this.eyeIcon = this.showEyeIconUrl;
                this.showPasswordFlag = true;
            }
        }
    },
    computed: {
        getUnlockStatus() {
            return this.form.password.length !== 16;
        }
    },
    watch: {
        tryUnLockCount(newVal) {
            if (+newVal <= 0) {
                this.show = false;
            }
        }
    },
    components: {}
};
</script>
<style lang="less" scoped>
@import '@/assets/css/theme_blue/component_round.less';
/deep/ .el-dialog {
    border-radius: 20px;
    max-width: 420px;
    min-width: 320px;
}

/deep/ .el-dialog__title {
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: Bold;
    font-size: 20px;
    color: #000000;
    word-break: keep-all;
}

/deep/ .el-dialog__body {
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-size: 14px;
    color: #000000;
    word-break: keep-all;
    line-height: 28px;
}

/deep/ .el-dialog__footer {
    text-align: left;
}
/deep/ .el-button--primary {
    background-color: @buttonColor;
}
/deep/ .el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
    background-color: #a0cfff;
}
.button-style {
    min-width: 120px !important;
    height: 52px;
    border-radius: 50px;
}
.password {
    position: relative;
    &-icon {
        width: 25px;
        position: absolute;
        float: right;
        top: 10px;
        right: 20px;
        cursor: pointer;
    }
}
</style>
